import { useUserInfo } from "@/hooks/useUserInfo";
import apiRequest from "@/service/apiRequest";
import { View, Image } from "@tarojs/components";
import { useDidShow, useLoad } from "@tarojs/taro";
import { useState } from "react";
import './index.scss';
import Taro from "@tarojs/taro";

function PetIdentifyList() {
    const { userInfo } = useUserInfo();
    const [list, setList] = useState<any[]>([]);
    const listRender = list.length ? list.map((item, index) => {
        return (
            <View className="pet-identify-list-item" key={index}>
                <Image className="pet-identify-list-item-img" src={item.petImage} mode="aspectFill" />
                <View className="pet-identify-list-item-name flex-c-c" onClick={() => handleToNextPage(item)}>-- 查看鉴定详情 --</View>
            </View>
        )
    }) : null;

    const handleToNextPage = (item) => {
        Taro.navigateTo({
            url: `/petIdentify/pages/detail/index?id=${item.id}&user_id=${item.userId}`
        })
    }

    const requestList = async () => {
        const res = await apiRequest.get(`/api/pet_identifies/list/${userInfo.userId}`);
        setList(res);
        if (res && res.length === 0) {
            Taro.navigateTo({
                url: '/petIdentify/pages/index/index'
            })
        }
    }

    useDidShow(() => {
        requestList();
    })

    const handleNextPage = () => {
        Taro.navigateTo({
            url: '/petIdentify/pages/index/index'
        })
    }
    return (
        <View>
            <View className="pet-identify-list-title">鉴定记录</View>
            <View className="pet-identify-list">
                { listRender }
            </View>
            <View className="footer-bar-wrapper">
                <View className="footer-btn" onClick={handleNextPage}>去鉴定</View>
            </View>
        </View> 
    )
}

export default PetIdentifyList;